<template>
	<div>

		<div style="margin-top: -20px;margin-bottom: 5px;">
			<el-input v-model="ProjectName" style="width: 150px;" placeholder="项目名称"></el-input>
			<el-button type="primary" style="margin-left: 5px;" @click="onSubmit()">查询</el-button>

			<el-button @click="ShowAdd">添加</el-button>
		</div>

		<el-table :data="tableData" border style="width: 100%;height: 50vh;">
			<el-table-column type="selection" width="55" />
			<el-table-column fixed prop="Id" label="编号" width="60" />
			<el-table-column label="项目名称" prop="ProjectName" width="200" />
			<el-table-column label="业务名称" prop="BusinessName" width="200" />
			<el-table-column label="订单名称" prop="OrdersName" width="200" />
			<el-table-column label="订单备注" prop="ProjectDesc" width="200" />
			<el-table-column label="金额" prop="Budget" width="120" />
			<el-table-column label="项目经理" prop="UserName" width="120" />
			<el-table-column label="客户名称" prop="ClientName" width="120" />
			<el-table-column label="创建时间" prop="CreateTime" width="200px" />
			<el-table-column label="开始时间" prop="BeginTime" width="200px" />
			<el-table-column label="结束时间" prop="EndTime" width="200px" />
			<el-table-column label="状态" prop="Status" width="120" />

			<el-table-column fixed="right" label="操作" min-width="120">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="Update(scope.row.Id)">编辑</el-button>
					<el-button link type="primary" size="small" @click="Delete(scope.row.Id)">删除</el-button>
					<el-button v-if="scope.row.Status == 1" link type="primary" size="small" @click="AssignTask(scope.row.Id)">分配任务</el-button>
					<ElButton v-if="scope.row.BeginTime" @click="taskshow(scope.row.Id)" link size="small"
						type="primary">查看任务</ElButton>
					<ElButton v-if="scope.row.BeginTime" @click="Postponetarshow(scope.row.Id)" link size="small"
						type="primary">延期/转移</ElButton>
				</template>
			</el-table-column>
		</el-table>


		<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30, 40]"
			:size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
			:total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
			style="margin-top: 10px;" />


		<el-dialog v-model="dialogAddVisible" title="添加" width="450px" draggable>
			<ProjectAdds @Close="Close" v-if="dialogAddVisible"></ProjectAdds>
		</el-dialog>
		<el-dialog v-model="dialogUpdateVisible" title="修改" width="400px" draggable>
			<ProjectUpdate :Id="Id" @Close="Close" v-if="dialogUpdateVisible"></ProjectUpdate>
		</el-dialog>

		<el-dialog v-model="dialogtaskVisible" title="分配任务" width="90%" center>
			<TaskAdd :Id="Id" @Close="Close" v-if="dialogtaskVisible"></TaskAdd>
		</el-dialog>

		<el-dialog v-model="taskVisble" title="查看任务" width="80%" center>
			<Selecttask :Id="Id" @Close="Close" v-if="taskVisble"></Selecttask>
		</el-dialog>

		<ElDialog v-model="postponeVisble" title="延期/转移" center width="80%">
			<PostponeTransfer :Id="Id" v-if="postponeVisble" @ColesDialog="ColesDialog"></PostponeTransfer>
		</ElDialog>
	</div>
</template>

<script setup lang="ts">
	import projapi from "@/api/projectapi"
	import { onMounted, reactive, ref } from "vue";
	import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
	//import ProjectAdd from "./ProjectAdd.vue";
	import ProjectAdds from "./ProjectAdds.vue";
	import ProjectUpdate from "./ProjectUpdate.vue";
	import TaskAdd from "@/Views/Task/TaskAdd.vue";
	import Selecttask from "./Selecttask.vue"
	import PostponeTransfer from "./PostponeTransfer.vue"
	
	const Id = ref();
	const ProjectName = ref("");
	const tableData = ref([]);
	const total = ref(0);
	const pageSize = ref(5);
	const pageIndex = ref(1);

	const size = ref<ElTable>('default')
	const background = ref(false)
	const disabled = ref(false)

	const dialogAddVisible = ref(false);
	const dialogUpdateVisible = ref(false);
	const dialogtaskVisible = ref(false);
	const taskVisble = ref(false);
	const postponeVisble = ref(false);
	const getdata = (ProjectName : string = "", PageSize : number = 5, PageIndex : number = 1) => {
		var query = {
			ProjectName: ProjectName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		projapi.query(query).then(res => {
			console.log("projectdata=", res);
			tableData.value = res.data
			total.value = res.total;
		}).catch(err => {
			console.log("err=>", err);
		})
	}

	onMounted(() => {
		getdata(ProjectName.value, pageSize.value, pageIndex.value)

	})

	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(ProjectName.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(ProjectName.value, pageSize.value, pageIndex.value);
	}

	const onSubmit = () => {
		getdata(ProjectName.value)
	}

	const ShowAdd = () => {
		dialogAddVisible.value = true;
	}

	const Update = (id : any) => {
		Id.value = id
		dialogUpdateVisible.value = true;
	}

	const AssignTask = (id : any) => {
		Id.value = id
		console.log("Id.value=", id)
		dialogtaskVisible.value = true;
	}

	const taskshow = (id : number) => {
		Id.value = id
		console.log("Id.value=", id)
		taskVisble.value = true;
	}
	const Postponetarshow = (id : any) => {
		Id.value = id,
		postponeVisble.value = true;
	}

	const Close = (val : any) => {
		switch (val) {
			case "add":
				dialogAddVisible.value = false;
				pageIndex.value = 1;
				getdata(ProjectName.value, pageSize.value, pageIndex.value);
				break;
			case "upd":
				dialogUpdateVisible.value = false;
				pageIndex.value = 1;
				getdata(ProjectName.value, pageSize.value, pageIndex.value);
				break;
			case "assign":
				dialogtaskVisible.value = false;
				pageIndex.value = 1;
				getdata(ProjectName.value, pageSize.value, pageIndex.value);
				break;
			case "cha":
				taskVisble.value = false;
				pageIndex.value = 1;
				getdata(ProjectName.value, pageSize.value, pageIndex.value);
				break;
			case "postpone":
				postponeVisble.value = false;
				pageIndex.value = 1;
				getdata(ProjectName.value, pageSize.value, pageIndex.value);
				break;
		}
	}
	const Delete = (Id : any) => {
		ElMessageBox.confirm('确定要删除吗？', 'Warning', {
			type: 'warning',
		}).then(() => {
			projapi.del({
				id: Id
			}).then((res) => {
				if (res.code > 0) {
					ElNotification.success({
						title: '提示',
						message: '删除成功',
						type: 'success',
						showClose: false,

					})
					getdata(ProjectName.value, pageSize.value, pageIndex.value);
				} else {
					ElNotification({
						title: '提示',
						message: '失败',
						type: 'error',
						showClose: false,
					})
				}

			})
		}).catch(() => {
			ElNotification({
				title: '提示',
				message: '删除取消',
				type: 'error',
				showClose: false,
			})
		})

		getdata(ProjectName.value, pageSize.value, pageIndex.value);
	}
</script>

<style scoped>

</style>